#{extends 'main.html' /}
#{set title:'Peungluang Intelligent System' /}

<script>
  
	$(function() {
		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "@{'/public/images/icon_set_1_32x32/actions/1day.png'}",
			//buttonImage: "!{'/public/stylesheets/ui-lightness/images/calendar.gif'}",
			buttonImageOnly: true
		});
	});
  
</script>

<form class="formReport">
  <div class="well" >
    <div class="row">
      <div class="well span6" style="height: 100%">
        <fieldset>
          <!--legend>Example form legend</legend-->
          <div class="clearfix">
            <label for="appendedInput">Field1</label>
            <div class="input">
              <div class="input-append">
                <input type="text" size="16" name="appendedInput" id="appendedInput" class="medium">
                <label class="add-on active">
                  <img src="@{'/public/images/icon_set_1_32x32/actions/search.png'}" >
                </label>
              </div>
            </div>
          </div><!-- /clearfix -->
          <div class="clearfix">
            <label for="xlInput">Field2</label>
            <div class="input">
              <input type="text" size="30" name="xlInput" id="xlInput" class="xspan3" style="width: 180px;">
            </div>
          </div><!-- /clearfix -->
          <div class="clearfix">
            <label for="appendedInput">Field3</label>
            <div class="input">
              <div class="input-append">
                <input type="text" size="16" name="appendedInput" id="datepicker" class="medium">
                <label class="add-on active">
                  <img src="@{'/public/images/icon_set_1_32x32/actions/1day.png'}">
                </label>
              </div>
            </div>
          </div><!-- /clearfix -->
        </fieldset>
      </div>
      <div class="well span6" style="height: 100%">
        <fieldset>
          <!--legend>Example form legend</legend-->
          <div class="clearfix">
            <label for="mediumSelect">Field4</label>
            <div class="input">
              <select id="mediumSelect" name="mediumSelect" class="medium">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div><!-- /clearfix -->
          <div class="clearfix">
            <label id="optionsCheckboxes">Field5</label>
            <div class="input">
              <ul class="inputs-list">
                <li>
                  <label>
                    <input type="checkbox" value="option1" name="optionsCheckboxes">
                    <span>Checkbox</span>
                  </label>
                </li>
              </ul>
              <!--span class="help-block">
                <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
              </span-->
            </div>
          </div><!-- /clearfix -->
          <div class="clearfix">
            <label id="optionsRadio">FieldN</label>
            <div class="input">
              <ul class="inputs-list">
                <li>
                  <label>
                    <input type="radio" value="option1" name="optionsRadios" checked="">
                    <span>Radio1</span>
                  </label>
                </li>
                <li>
                  <label>
                    <input type="radio" value="option2" name="optionsRadios">
                    <span>Radio2</span>
                  </label>
                </li>
              </ul>
            </div>
          </div><!-- /clearfix -->
        </fieldset>
      </div>
    </div>
  </div>
</form>

